{% extends "index.html" %}
{% load static %}



{% block left-sidebar-a-class %}
<li><a href={% url 'index' %} class=""><i class="lnr lnr-home"></i> <span>主页</span></a></li>
<li><a href={% url 'elements' %} class=""><i class="lnr lnr-code"></i> <span>链路信息</span></a></li>
<li><a href={% url 'unusual-traffic' %} class=""><i class="lnr lnr-home"></i> <span>异常流量</span></a></li>
<li><a href={% url 'tables' %} class="active"><i class="lnr lnr-dice"></i> <span>流表管理</span></a></li>
<li><a href={% url 'panels' %} class=""><i class="lnr lnr-cog"></i> <span>业务分类</span></a></li>
<li><a href={% url 'notifications' %} class=""><i class="lnr lnr-alarm"></i> <span>QoS路由</span></a></li>
{% endblock %}
{% block main-content %}
    {% csrf_token %}
<div class="main-content">
	<div class="container-fluid">
		<div class="row">
				<div class="panel panel-default">

                        <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" data-toggle="modal" data-target="#myModal" >添加流表</button>

					<div class="panel-body" style="padding: 0">
						<table class="table table-striped table-bordered table-hover" style="margin-bottom: 0">
							<thead>
								<tr>
									<th>dpid</th>
									<th>actions</th>
									<th>idle_timeout</th>
									<th>cookie</th>
									<th>packet_count</th>
									<th>hard_timeout</th>
									<th>byte_count</th>
									<th>duration_sec</th>
									<th>duration_nsec</th>
									<th>priority</th>
									<th>length</th>
									<th>flags</th>
									<th>table_id</th>
									<th>match</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
								{% for flow_table in flow_table_list %}
									{% for keys,data in flow_table.items %}
										{% for value in data %}
											<tr>
												<td>{{ keys }}</td>
												<td>{{ value.actions }}</td>
												<td>{{ value.idle_timeout }}</td>
												<td>{{ value.cookie }}</td>
												<td>{{ value.packet_count }}</td>
												<td>{{ value.hard_timeout }}</td>
												<td>{{ value.byte_count }}</td>
												<td>{{ value.duration_sec }}</td>
												<td>{{ value.duration_nsec }}</td>
												<td>{{ value.priority }}</td>
												<td>{{ value.length }}</td>
												<td>{{ value.flags }}</td>
												<td>{{ value.table_id }}</td>
												<td>{{ value.match }}</td>
												<td><button type="button" class="layui-btn layui-btn-primary layui-btn-radius" lay-on="test-msg-dark">删除</button></td>
											</tr>
										{% endfor %}
									{% endfor %}
								{% endfor %}
							</tbody>
						</table>
					</div>
				</div>

		</div>
	</div>
</div>

<!-- 添加流表模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">添加流表</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" role="form">
					<div class="form-group">
						<label for="dpid" class="col-sm-2 control-label">dpid</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="dpid" placeholder="请输入dpid">
						</div>
					</div>
					<div class="form-group">
						<label for="actions" class="col-sm-2 control-label">actions</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="actions" placeholder="请输入actions">
						</div>
					</div>
                    <div class="form-group">
						<label for="cookie" class="col-sm-2 control-label">cookie</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="cookie" placeholder="请输入cookie">
						</div>
					</div>
					<div class="form-group">
						<label for="priority" class="col-sm-2 control-label">priority</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="priority" placeholder="请输入priority">
						</div>
					</div>
					<div class="form-group">
						<label for="table_id" class="col-sm-2 control-label">table_id</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="table_id" placeholder="请输入table_id">
						</div>
					</div>
					<div class="form-group">
						<label for="match" class="col-sm-2 control-label">match</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="match" placeholder="请输入match">
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" id="add-flow-table">保存</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{% endblock %}

{% block script_js %}
    <script src="{% static 'assets/scripts/delete_flow_table.js' %}"></script>
{% endblock %}